<template>
  <view>
    <view class="list">
      <view class="one" v-for="(apply,index) in applyList" :key="index">
        <view @click="click(apply.id,index)">
          <view class="two">
            <view class="name" v-if="isTeacher">
              <text>请假人：</text>
              <text class="audit green">{{ apply.name }}（<text>{{ apply.num }}</text>）</text>
            </view>
            <view class="name" v-else>
              <text>我的请假：</text>
              <text :class="apply.isGoOut === 1 ? 'audit red':'audit green'">{{ apply.isGoOut | isOutText }}</text>
            </view>
          </view>
          <view class="two">
            <view class="name">
              <text>填写时间：</text>
              <text class="audit red">{{ apply.gmtCreate }}</text>
            </view>
          </view>
          <view class="three">
            <text>开始时间：</text>
            <text>{{ apply.beginTime }}</text>
          </view>
          <view class="three">
            <view class="four">
              <view class="a">
                <text>结束时间：</text>
                <text>{{ apply.endTime }}</text>
              </view>
              <u-icon name="arrow-right"></u-icon>
            </view>
          </view>
          <view class="three">
            <text>状态：</text>
            <text :class="apply.audit === 1 ? 'audit green' : 'audit red'">{{ apply.audit | auditText }}</text>
          </view>
          <u-line color="blue" />
        </view>
        <view @click="leaveOff(apply.id,index)" class="leave-off" v-show="(apply.audit === 1 && apply.leaveOff === 0)">销假</view>
        <view class="leave-off" v-show="(apply.audit === 1 && apply.leaveOff === 1)">于{{ apply.gmtModified }}销假</view>
        <u-line color="blue" />
      </view>
      <u-loadmore :status="status" />
    </view>
  </view>
</template>

<script>
export default {
  name:"askForLeaveList",
  data() {
    return {

    };
  },
  props: {
    applyList: {
      type: Array,
      default: []
    },
    status: {
      type: String,
      default: ''
    },
    isTeacher: {
      type: Boolean,
      default: true
    }
  },
  methods:{
    click(id,index){
      if (this.isTeacher) {
        this.auditDetail(id,index)
      }else {
        this.applyDetail(id);
      }
    },
    auditDetail(id,index){
      this.$u.route({
        url: 'pages/audit/audit',
        params: {
          id: id,
          index: index
        }
      });
    },
    applyDetail(id){
      this.$u.route({
        url: 'pages/ask_for_leave_detail/ask_for_leave_detail',
        params: {
          id: id
        }
      });
    },
    leaveOff(id,index){
      let data = {
        id: id,
        leaveOff: 1
      }
      this.$u.api.updateAskForLeave(data).then(res => {
        if (res.code === 200){
          this.applyList[index].leaveOff = 1;
          this.$u.toast('销假成功！')
        }
      })
    }
  },
  filters:{
    isOutText(v){
      return v === 1 ? '离校' : '留校';
    },
    auditText(v){
      let str = '';
      if(v === 1){
        str = '已通过';
      }else if(v === 2){
        str = '未审核';
      }else if(v === 3){
        str = '未通过';
      }else if(v === 4){
        str = '已撤销';
      }else {
        str = "已过期";
      }
      return str;
    }
  }
}
</script>

<style lang="scss">
.audit {
  height: 30rpx;
  background-color: $u-type-info-light;
  font-weight: bold;
  line-height: 30rpx;
  text-align: center;
}

.five {

  margin-right: 5rpx;
}
.sixe {
  margin-left: 5rpx;
}
.red {
  color: red;
}
.blue {
  color: blue;
}
.green {
  color: green;
}
.bold {
  font-weight: bold;
}
.list {
  display: flex;
  flex-direction: column;
  margin-bottom: 120rpx;
  font-size: 30rpx;
  .one {
    width: 100%;
    height: 400rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 20rpx;
    .leave-off{
      font-size: 37rpx;
      text-align: center;
      color: blue;
      font-weight: bold;
      // #ifdef MP
      margin-bottom: 20rpx;
      margin-top: 20rpx;
      // #endif
    }
    .two {
      display: flex;
      justify-content: space-between;
      font-size: 30rpx;
      margin: 5rpx 0 5rpx 30rpx;
    }
    .three {
      font-size: 30rpx;
      margin:0 0 20rpx 30rpx;
      .four {
        display: flex;
        justify-content: space-between;
        font-size: 30rpx;
        margin: 0 30rpx 0 0;
      }
    }
  }
}
</style>
